<template>
	<view class="inviteFriends">
        <SRV-topbar title="我的邀请" :isLeft="true"></SRV-topbar>
        <view class="searchInfo">
        	<view style="width: 20%;">关键词</view>
        	<view class="searchInput"><input type="text" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人姓名/电话" v-model="pageParam.userkey"/></view>
            <view class="btn" @click="searchFun()">搜索</view>
        </view>
		<view class="nav">
		    <view @click.stop="getsel(2)" :class="nowLevel == 2 ? 'item sel' : 'item'" >
		        直推（{{oneNum}}个）
		    </view>
            <view @click.stop="getsel(3)" :class="nowLevel == 3 ? 'item sel' : 'item'" >
                团队（{{twoNum}}个）
            </view>
		</view>
		<view v-for="(item,index) in pageResult.list" :key="index" class="line">
			<view class="left">
				<image :src="item.head_portrait" mode="aspectFill"></image>
				<view class="txt">
					<view class="txt_top">
						<text class="oneline">{{item.realname}}</text>
						<text class="oneline">{{item.mobile}}</text>
					</view>
                </view>
                <view class="txt">
                    <view class="txt_top">
                        <image :src="item.levelIcon" mode="widthFix" class="icon"></image>
                        <view>{{item.levelName}}</view>
                    </view>
				</view>
			</view>
            <view class="rewardInfo">
                <view>贡献值：{{item.rewardInfo.gxz}}</view>
                <view>囤陈三：{{item.rewardInfo.three}}</view>
                <view>囤陈一：{{item.rewardInfo.one}}</view>
            </view>
            <view class="remark" v-html="item.remark"></view>
		</view>
		
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
		</view>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				nowLevel: 2,
				oneNum: 0,
				twoNum: 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    userkey : '',
                    level: 2,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				show: {},
			}
		},
		methods: {
            getsel(level) {
                _self.nowLevel = level;
                _self.pageParam.level = level;
                _self.pageParam.page=0;
                _self.pageResult.list=[];
                _self.getList();
            },
            getInfo(){
            	serve.request({
            		url: '/member/invite/get-total',
            		data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token')
                    },
                    v: '/v3'
            	}).then(res => {
            		_self.oneNum = res.data.oneNum;
            		_self.twoNum = res.data.twoNum;
            	});
            },
            searchFun() {
                _self.pageParam.page=0;
                _self.pageResult.list=[];
                _self.getList();
            },
			getList(){
				_self.pageParam.page++
				serve.request({
					url: '/member/invite/list',
					data: _self.pageParam,
                    v: '/v3'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
            _self = this;
			_self.getInfo();
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onPullDownRefresh() {
			_self.getInfo();
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd || _self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.inviteFriends {
		.nav {
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 40upx;
			border-top: 8upx #b1b1b3 solid;
			border-bottom: 8upx #b1b1b3 solid;
			.item {
				position: relative;
				height: 28upx;
				line-height: 28upx;
				width: 50%;
				text-align: center;
				opacity: 0.5;
				font-size: 36upx;
				border-right: 1upx rgba(60, 72, 104, 0.2) solid;
			}
            
            .sel {
                font-weight: bold !important;
                opacity: 1 !important;
            }
		}
        .searchInfo {
            padding: 10rpx 2%;
            display: flex;
            align-items: center;
            .searchInput {
                border: 1px solid #ccc;
                width: 60%;
                padding: 5rpx 0 5rpx 20rpx;
                border-radius: 20rpx;
            }
            .btn {
                width: 20%;
                text-align: center;
                border: 1rpx solid #ffd900;
                background-color: #ffd900;
                margin-left: 20rpx;
                border-radius: 20rpx;
            }
        }
		.tabbar {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
            padding-bottom: 30rpx;
			border-bottom: 1rpx #EBEBEB solid;
			view {
				margin-top: 30rpx;
				margin-left: 40rpx;
				border-radius:40rpx;
				color: #999999;
				font-size: 28rpx;
				padding: 16rpx 30rpx;
				background-color:#F5F5F5;
			}

			.check {
				background: #FFF9E8;
				color: #FFBC00;
			}
		}

		.line {
			padding: 30rpx;
			border-bottom: 8rpx rgba(57, 72, 107, 0.1) solid;

			.left {
				display: flex;
				align-items: center;    
                justify-content: space-around;
                margin-bottom: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.txt {
					margin-left: 30rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					.txt_top{
						display: flex;
						align-items: center;
						image{
							border-radius: 0;
							width:90rpx;
							height:32rpx;
							margin-right: 7rpx;
						}
                        .icon {
                            width: 60rpx;
                            height: 60rpx;
                        }
					}
					.txt_text2{
						margin-top: 30rpx;
					}
					text:first-child{
						color: #333333;
						font-size: 32rpx;
						margin-right: 19rpx;
					}

					text:last-child {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
        
        .rewardInfo {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: center;
            border-top: 1rpx solid #f7f1f1;
            padding: 20rpx 0;
            view{
                width: 33%;text-align: center;
            }
        }
	}
</style>
